<!DOCTYPE html>
<html>
<head>
<title>F-x Graph for Physics Problem</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  canvas {
    border: 1px solid #ccc;
  }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="450" height="400"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Configuration ---
    const origin = { x: 60, y: 350 };
    const scale = { x: 24, y: 24 };

    // --- Helper function to map graph coordinates to canvas coordinates ---
    function P(x, y) {
        return {
            px: origin.x + x * scale.x,
            py: origin.y - y * scale.y
        };
    }

    // --- Style setup ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';

    // --- Draw Axes ---
    ctx.lineWidth = 2;
    ctx.beginPath();
    // Y-axis line
    ctx.moveTo(origin.x, origin.y);
    ctx.lineTo(origin.x, origin.y - 12 * scale.y);
    // X-axis line
    ctx.moveTo(origin.x, origin.y);
    ctx.lineTo(origin.x + 17 * scale.x, origin.y);
    ctx.stroke();

    // Arrowheads
    // Y-axis arrowhead
    ctx.beginPath();
    ctx.moveTo(origin.x, origin.y - 12 * scale.y);
    ctx.lineTo(origin.x - 6, origin.y - 12 * scale.y + 12);
    ctx.lineTo(origin.x + 6, origin.y - 12 * scale.y + 12);
    ctx.closePath();
    ctx.fill();

    // X-axis arrowhead
    ctx.beginPath();
    ctx.moveTo(origin.x + 17 * scale.x, origin.y);
    ctx.lineTo(origin.x + 17 * scale.x - 12, origin.y - 6);
    ctx.lineTo(origin.x + 17 * scale.x - 12, origin.y + 6);
    ctx.closePath();
    ctx.fill();

    // --- Draw Labels and Ticks ---
    // Axis Labels
    ctx.font = 'italic 18px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('F/N', origin.x - 25, P(0, 11).py);

    ctx.textBaseline = 'top';
    ctx.fillText('x/m', P(17, 0).px, P(17, 0).py + 5);

    // Origin Label
    ctx.font = 'italic 20px Arial';
    ctx.textAlign = 'right';
    ctx.textBaseline = 'top';
    ctx.fillText('O', origin.x - 5, origin.y + 5);

    // Tick Labels
    ctx.font = '16px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';
    ctx.fillText('5', P(5, 0).px, P(5, 0).py + 5);
    ctx.fillText('10', P(10, 0).px, P(10, 0).py + 5);
    ctx.fillText('15', P(15, 0).px, P(15, 0).py + 5);

    ctx.textAlign = 'right';
    ctx.textBaseline = 'middle';
    ctx.fillText('10', P(0, 10).px - 8, P(0, 10).py);


    // --- Draw the F-x graph ---
    ctx.beginPath();
    ctx.lineWidth = 2.5;
    ctx.moveTo(P(0, 0).px, P(0, 0).py);
    ctx.lineTo(P(5, 10).px, P(5, 10).py);
    ctx.lineTo(P(10, 10).px, P(10, 10).py);
    ctx.lineTo(P(15, 0).px, P(15, 0).py);
    ctx.stroke();

    // --- Draw Dashed Lines ---
    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.setLineDash([5, 4]);

    // Horizontal dashed line
    ctx.moveTo(P(0, 10).px, P(0, 10).py);
    ctx.lineTo(P(5, 10).px, P(5, 10).py);

    // Vertical dashed lines
    ctx.moveTo(P(5, 0).px, P(5, 0).py);
    ctx.lineTo(P(5, 10).px, P(5, 10).py);
    ctx.moveTo(P(10, 0).px, P(10, 0).py);
    ctx.lineTo(P(10, 10).px, P(10, 10).py);
    ctx.stroke();

    // --- Draw Caption ---
    ctx.setLineDash([]); // Reset line style
    ctx.font = '20px "KaiTi", "SimSun"'; // Use KaiTi font for Chinese characters, with fallback
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('习题 2-13 图', canvas.width / 2, canvas.height - 10);

</script>
</body>
</html>